<template>
  <div class="add-wrap">
    <FooderTree
      class="folder-tree"
      :folders="folders"
      :selectFiled="selectFiled"
      @editJS="editJS"
      @addfile="showAddFile"
      @addFolder="addFolder"
      @run="runfunction"
      @delete="showDeleteConfirm"
    />
    <!-- 编辑器 -->
    <a-tabs
      v-model="activateKey"
      type="editable-card"
      class="tap-wrap"
      :hideAdd="true"
      @edit="deleteTab"
    >
      <a-tab-pane
        v-for="(file, index) in activateFile"
        :key="index"
        :tab="file.name"
        :closable="file.closable"
      >
        <!-- + '__' + file.isReadOnly -->
        <a-spin :spinning="file.isLoading" class="add-wrap__edit">
          <!-- v-if="activateKey == index" -->
          <div v-if="index == activateKey" class="editor-wrap">
            <Editor
              v-if="file.content || file.isNew || file.isAdd"
              :code="file.content"
              :readOnly="file.isReadOnly"
              @save="doconfirm"
              @change="dochange"
              @runf5="saveAndRun"
              @runf11="startFullscreen"
              @editorDidMount="editorMount(file, $event)"
            ></Editor>
          </div>
        </a-spin>
      </a-tab-pane>

      <div slot="tabBarExtraContent">
        <a-button type="link" @click="startFullscreen">
          <a-icon type="fullscreen" />
        </a-button>
      </div>
    </a-tabs>

    <!-- 左侧调试区域 -->
    <a-drawer
      width="800px"
      placement="right"
      :closable="false"
      :get-container="false"
      :visible="drawerVisible"
      @close="hideDrawer"
    >
      <div :style="editresult">
        <Editor
          class="editor-wrap"
          language="json"
          :readOnly="true"
          @editorDidMount="didMountResult"
        ></Editor>
      </div>

      <a-button @click="runfunctionTest()" style="margin-top:20px"
        >运行(F5)</a-button
      >

      <div
        style="float: right;    padding-top: 24px;
  padding-right: 20px;"
      >
        Status:&nbsp;
        <span v-if="isRunSuccess" style="color:#608b4e">Success</span>
        <span v-else style="color:red">Error</span>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Time:<span style="color:#608b4e"
          >&nbsp;{{ runTimeOfMs }}ms</span
        >
      </div>

      <a-divider />
      <div :style="editsql">
        <Editor
          class="editor-wrap"
          language="json"
          @runf5="runfunctionTest"
          @editorDidMount="didMountEdit"
        ></Editor>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import Editor from "@/components/editor.vue";
import FooderTree from "@/components/foldertree.vue";
import AddFile from "@/components/addfile.vue";
import AddFodler from "@/components/addfolder.vue";

import {
  baseTemplate,
  stateTemplate,
  descriptionTemplate,
  normalTemplate,
  configTemplate
} from "@/templates/basetemplate.js";
import { mapState, mapMutations, mapGetters } from "vuex";
import { fullScreen } from "@/utils/index.js";

// eslint-disable-next-line no-unused-vars
import {
  synchro,
  broadcast,
  getFileByModulePath,
  subscribeTopic
} from "./folderState";

export default {
  components: {
    Editor,
    FooderTree
  },
  data() {
    return {
      userinfo: this.userInfo(),

      activateFile: [], // 打开的文件列表
      activateKey: 0, // 当前打开文件的索引
      selectFiled: "",
      fileKeyValueDic: {},
      // -------------------------------
      fullscreenEl: null,

      editorEdit: {},
      editorResult: {},
      drawerVisible: false,

      isRunSuccess: false,
      runTimeOfMs: 0,

      editsql: {
        height: document.body.clientHeight * 0.38 + "px",
        width: "750px"
      },
      editresult: {
        height: document.body.clientHeight * 0.45 + "px",
        width: "750px"
      },

      openKeys: ["CloudFunctions"],
      modulename: "",

      spinning: false,

      modalInput: "",
      selectedChildType: null,
      selectedChild: null,
      SelectedLastJSFile: null,

      selectedValue: "",
      selectedTempValue: "",

      appSettingNode: {
        name: "AppSetting",
        type: "js",
        modulePath: "AppSetting",
        isOpen: false,
        isAdd: true,
        isConfig: true,
        isUseState: false,
        childs: [],
        isEdit: false,
        isReadOnly: false,
        editor: null,
        editUserName: "",
        isInitChanged: false
      },
      globalNode: {
        name: "Global",
        type: "js",
        modulePath: "Global",
        isOpen: false,
        isAdd: true,
        isConfig: true,
        isUseState: false,
        childs: [],
        isEdit: false,
        isReadOnly: false,
        editor: null,
        editUserName: "",
        isInitChanged: false
      },
      folders: [
        {
          name: "CloudFunctions",
          type: "folder",
          isOpen: true,
          childs: []
        }
      ]
    };
  },

  computed: {
    ...mapState("function", ["name"])
  },

  watch: {
    activateKey: function(newValue) {
      var file = this.activateFile[newValue];

      console.log("file", file);
      if (file.isInitChanged && file.name.indexOf(" *") == -1) {
        file.name += " *";
      }

      this.selectFiled = file.modulePath;
      if (file.editor) {
        setTimeout(function() {
          if (file.isChanged) {
            file.editor.setValue(file.changeValue);
          }
        }, 100);
      }
    }
  },

  created() {
    // window.onbeforeunload = function() {
    //   // return "确认离开当前页面吗？未保存的数据将会丢失";
    // };

    // setInterval(() => {
    //   location.reload();
    // }, 6000);

    let that = this;

    that.$cloud.on(subscribeTopic, function(res) {
      console.log("subscribe", res);
      if (res.Code === 200) {
        return;
      }
      const event = JSON.parse(res.Body);
      synchro[event.action].bind(that)(event.parameter);
      console.log("subscribe", res);
    });

    this.initActivateFiles();
    this.$cloud
      .getFunctions({})
      .then(res => {
        console.log("getFunctions", res);

        for (let index = 0; index < res.length; index++) {
          const element = res[index];
          var arr = element.modulePath.split("/");

          // console.log("invoker", element);

          // 有文件夹
          if (arr.length > 1) {
            // 用于保存最后Folder的引用
            var lastFolder = null;
            for (let indexArr = 0; indexArr < arr.length; indexArr++) {
              let title = arr[indexArr];

              // 最后一个文件
              if (arr.length == indexArr + 1) {
                element.isChanged =
                  element.EditChannel &&
                  this.userinfo.name == element.EditChannel;

                let itemFile = {
                  name: title,
                  type: "js",
                  modulePath: element.modulePath,
                  isUseState: element.isUseState,
                  isEdit: element.IsEditState,
                  isReadOnly: element.IsEditState,
                  editor: null,
                  editUserName: element.EditChannel,
                  isInitChanged: element.isChanged
                };

                lastFolder.childs.push(itemFile);

                if (
                  element.EditChannel &&
                  this.userinfo.name == element.EditChannel
                ) {
                  this.selectFiled = element.modulePath;

                  var itemfile2 = Object.assign(Object.create(null), itemFile);
                  itemfile2.name += " *";
                  this.editJS(itemfile2);

                  // let selectedFile = {
                  //   content: itemFile.scriptContent || "",
                  //   closable: true,
                  //   isLoading: !itemFile.scriptContent,
                  //   isAdd: false,
                  //   ...itemFile
                  // };

                  // this.activateFile.push(
                  //   Object.assign(Object.create(null), selectedFile)
                  // );
                }
              }
              // 目录
              else {
                var lastFolderIsNull = lastFolder == null;

                var folderObject = {
                  name: title,
                  type: "folder",
                  isOpen: false,
                  childs: []
                };

                if (lastFolderIsNull) {
                  var filterFolder = [];

                  for (
                    let indexFilter = 0;
                    indexFilter < this.folders[0].childs.length;
                    indexFilter++
                  ) {
                    const elementFilter = this.folders[0].childs[indexFilter];
                    if (elementFilter.name == folderObject.name) {
                      filterFolder.push(elementFilter);
                      break;
                    }
                  }

                  var isHavFolder = filterFolder.length > 0;

                  if (isHavFolder) {
                    lastFolder = filterFolder[0];
                  } else {
                    this.folders[0].childs.push(folderObject);
                    lastFolder = folderObject;
                  }
                } else {
                  lastFolder.childs.push(folderObject);
                  lastFolder = folderObject;
                }
              }
            }
          }
          // 单文件
          else {
            if (arr[0] == "AppSetting") {
              this.appSettingNode.isAdd = false;
              this.appSettingNode.isConfig = false;

              this.appSettingNode.isEdit = element.IsEditState;
              this.appSettingNode.isReadOnly = element.IsEditState;
              this.appSettingNode.editor = null;
              this.appSettingNode.editUserName = element.EditChannel;
              this.appSettingNode.isInitChanged = element.isChanged;
            } else if (arr[0] == "Global") {
              this.globalNode.isAdd = false;
              this.globalNode.isConfig = false;
              this.globalNode.isEdit = element.IsEditState;
              this.globalNode.isReadOnly = element.IsEditState;
              this.globalNode.editor = null;
              this.globalNode.editUserName = element.EditChannel;
              this.globalNode.isInitChanged = element.isChanged;
            } else {
              this.folders[0].childs.push({
                name: arr[0],
                type: "js",
                modulePath: element.modulePath,
                isUseState: element.isUseState,
                isEdit: element.IsEditState,
                isReadOnly: element.IsEditState,
                editor: null,
                editUserName: element.EditChannel,
                isInitChanged: element.isChanged
              });
            }
          }
        }

        this.folders[0].childs.push(this.appSettingNode);
        this.folders[0].childs.push(this.globalNode);

        console.log(res, this.folders);
      })
      .catch(error => {
        console.error("getFunctions", error);
      });
  },

  destroyed() {
    window.onbeforeunload = null;
    this.$cloud.off(subscribeTopic, function() {
      console.log("unsubscribe", subscribeTopic);
    });
  },

  mounted() {
    this.fullscreenEl = document.getElementsByClassName("layout-content")[0];
  },

  methods: {
    ...mapMutations("function", ["getFunc"]),
    ...mapGetters("user", ["userInfo", "isSubscribeEditFn", "subscribeEditFn"]),

    startFullscreen() {
      fullScreen.activate(this.fullscreenEl);
    },

    // 初始化打开的文件夹列表
    initActivateFiles() {
      this.activateFile = [
        {
          name: "模板",
          content: descriptionTemplate,
          closable: false,
          isLoading: false,
          isAdd: false,
          isReadOnly: true
        }
      ];
    },

    addFolder: function(folder) {
      this.selectedChild = folder;
      const h = this.$createElement;
      const content = h(AddFodler);
      // this.selectedChild = folder;
      // this.selectedChildType = "folder";
      this.$info({
        title: "",
        icon: () => h(""),
        content,
        footer: null,
        onOk: () => {
          const data = content.child.$data;
          this.handleOk({
            modalInput: data.modalInput,
            selectedChildType: "folder"
          });
        },
        onCancel: () => {}
      });
    },

    showAddFile(child) {
      this.selectedChild = child;
      const h = this.$createElement;
      const content = h(AddFile);
      this.$info({
        title: "",
        icon: () => h(""),
        content,
        footer: null,
        onOk: () => {
          const data = content.child.$data;
          this.handleOk({
            modalInput: data.modalInput,
            selectedChildType: data.selectedChildType,
            selectedValue: data.selectedValue,
            selectedTempValue: data.selectedTempValue
          });
        },
        onCancel: () => {}
      });
    },

    // 添加文件
    handleOk: function(obj) {
      if (!obj.modalInput) {
        this.$message.error("请输入名称");
        return;
      } else if (obj.modalInput == "CloudFunctions") {
        this.$message.error("不可使用保留名称 CloudFunctions");
        return;
      } else if (obj.selectedChildType != "folder" && !obj.isBroadcast) {
        if (obj.modalInput == this.selectedChild.name) {
          this.$message.error("不能于目錄文件名相同");
          return;
        }
        if (!obj.selectedValue) {
          this.$message.error("请选择模块类型");
          return;
        }
        if (obj.selectedValue == "有状态") {
          if (!obj.selectedTempValue) {
            this.$message.error("请选择模板类型");
            return;
          }
        }
      }

      // 广播容错
      if (obj.isBroadcast) {
        if (obj.selectedChildName == "CloudFunctions") {
          this.selectedChild = this.folders[0];
        } else {
          this.folders[0].childs.forEach(item => {
            if (item.name == obj.selectedChildName) {
              this.selectedChild = item;
            }
          });
        }
      }

      var parent =
        this.selectedChild.name == "CloudFunctions"
          ? this.folders[0]
          : this.selectedChild;

      var filter = parent.childs.filter(
        item => item.name.toUpperCase() == obj.modalInput.toUpperCase()
      );
      if (filter.length > 0) {
        if (!obj.isBroadcast) {
          this.$message.error("名称已存在");
        }
        return;
      }

      // 广播状态
      if (!obj.isBroadcast) {
        obj.selectedChildName = this.selectedChild.name;
        if (obj.selectedChildType != "folder") {
          broadcast.addFile.bind(this)(Object.assign(Object.create(null), obj));
        } else {
          broadcast.addFolder.bind(this)(
            Object.assign(Object.create(null), obj)
          );
        }
      }

      var node = null;

      if (obj.selectedChildType == "folder") {
        node = {
          name: obj.modalInput,
          type: obj.selectedChildType,
          modulePath: parent.name + "/" + obj.modalInput,
          isOpen: false,
          childs: []
        };
        this.selectedChild.childs.splice(
          this.selectedChild.childs.length - 2,
          0,
          node
        );
      } else {
        node = {
          name: obj.modalInput,
          type: obj.selectedChildType,
          modulePath: parent.name + "/" + obj.modalInput,
          isOpen: false,
          isAdd: obj.isBroadcast ? false : true,
          isUseState: obj.selectedValue == "有状态",
          tempValue: obj.selectedTempValue,
          childs: [],
          isEdit: true,
          editUserName: this.userinfo.name
        };
        this.selectedChild.childs.push(node);
        this.selectedChild = node;
        if (!obj.isBroadcast) {
          this.editJS(node);
          setTimeout(this.doconfirm.bind(this), 100);
        }
      }
    },

    showDeleteConfirm({ child: item, childIndex: index, folder: parent }) {
      // console.log(item);
      var that = this;
      this.$confirm({
        title: `Are you sure delete this ${item.type}?`,
        content: "删除后将从目录列表中移除",
        okText: "Yes",
        okType: "danger",
        cancelText: "No",
        onOk() {
          if (item.type == "folder") {
            for (let index = 0; index < parent.childs.length; index++) {
              const element = parent.childs[index];
              if (element.name == item.name) {
                parent.childs.splice(index, 1);
              }
            }
            broadcast.delFolder.bind(that)(item.modulePath);
          } else {
            that.deleteItem(item, index, parent);
          }
        },
        onCancel() {}
      });
    },

    didMountEdit(editor) {
      this.editorEdit = editor;
    },

    didMountResult(editor) {
      this.editorResult = editor;
    },

    hideDrawer() {
      this.drawerVisible = false;
    },

    runfunctionTest: function() {
      const paramters = this.editorEdit.getValue();
      const paramterObj = eval("(" + paramters + ")");
      var startDate = new Date().getTime();
      this.$cloud
        .command(paramterObj.CommandText, {
          StateKey: paramterObj.StateKey,
          IsUseState: paramterObj.IsUseState,
          ExportedFunctionName: paramterObj.ExportedFunctionName,
          Parameters: paramterObj.Parameters
        })
        .then(res => {
          console.log(res);
          this.isRunSuccess = true;
          this.runTimeOfMs = new Date().getTime() - startDate;
          this.editorResult.setValue(JSON.stringify(res, null, "\t"));
        })
        .catch(error => {
          console.log(error);
          this.isRunSuccess = false;
          this.runTimeOfMs = new Date().getTime() - startDate;
          this.editorResult.setValue(JSON.stringify(error, null, "\t"));
        });
    },

    saveAndRun: function() {
      let that = this;
      const file = this.activateFile[this.activateKey];
      const value = file.editor.getValue();

      console.log(that.folders, file);

      this.doconfirm(value, () => {
        that.runfunction(file);
      });
    },

    runfunction: function(item) {
      // console.log(item);

      this.isRunSuccess = false;
      this.runTimeOfMs = 0;

      setTimeout(
        function() {
          var append = "";
          if (item.isUseState) {
            append += '\n    "IsUseState": true,\n\n';
            append += "    // PrimaryKey: String  - 对象唯一关键字 ,\n";
            append += '    "StateKey": "",\n\n';
            append += "    // Exports Function Name \n";
            append += '    "ExportedFunctionName": "",\n';
          }

          this.editorEdit.setValue(`{
    "CommandText":"iTool Cloud Run ${item.modulePath}",${append}
    // 客户端参数,没有可为空
    "Parameters": []
}`);
        }.bind(this),
        this.editorEdit ? 1 : 500
      );

      this.drawerVisible = true;
    },

    handleSelectChange(value) {
      this.selectedValue = value;
    },

    deleteItem: function(item, index, parent) {
      console.log("deleteItem", item);

      if (!item.modulePath || item.isAdd) {
        for (let index = 0; index < parent.childs.length; index++) {
          const element = parent.childs[index];
          if (element.name == item.name) {
            parent.childs.splice(index, 1);
          }
        }
        broadcast.delFile.bind(this)(item.modulePath);
        return;
      }

      this.$cloud.deleteFunction(item.modulePath).then(res => {
        if (res - 0 == 0) {
          this.$message.error("该函数被计划任务引用，不可以直接删除。");
          return;
        }

        if (res - 0 == 1) {
          this.$message.success("删除成功");

          broadcast.delFile.bind(this)(item.modulePath);

          for (let index = 0; index < parent.childs.length; index++) {
            const element = parent.childs[index];
            if (element.name == item.name) {
              parent.childs.splice(index, 1);
            }
          }
        }
      });
    },

    // 取消添加
    handleCancel: function() {
      this.selectedChild = null;
      this.selectedValue = null;
    },

    editorMount(file, editor) {
      file.editor = editor;
      const obj = this.getOFileByModulePaht(file.modulePath);
      if (obj) {
        obj.editor = editor;
      }
    },

    deleteTab(targetKey, action) {
      if (action === "remove") {
        let file = this.activateFile[targetKey];

        // 退出編輯狀態
        let ofile = this.getOFileByModulePaht(file.modulePath);
        if (ofile) {
          debugger;
          if (
            !ofile.isInitChanged &&
            ofile.editUserName == this.userinfo.name
          ) {
            broadcast.fileContent.bind(this)({
              modulePath: file.modulePath,
              changeValue: file.content
            });

            broadcast.unEditState.bind(this)(
              ofile,
              this.userinfo,
              file.content,
              300
            );
          }

          this.activateFile.splice(targetKey, 1);
          if (this.activateKey === targetKey) {
            this.activateKey = targetKey - 1;
          } else if (this.activateKey > targetKey) {
            this.activateKey--;
          }
        }
      }
    },

    // 编辑JS文件
    editJS: function(file) {
      const panes = this.activateFile;
      debugger;
      const idx = panes.findIndex(
        item => item.name === file.name || item.name === file.name + " *"
      );
      if (idx !== -1) {
        const currentFile = this.activateFile[idx];
        const ofile = this.getOFileByModulePaht(currentFile.modulePath);
        currentFile.isReadOnly = ofile.isReadOnly;
        this.activateKey = idx;
      } else {
        let selectedFile = {
          content: file.scriptContent || "",
          closable: true,
          isLoading: !file.scriptContent,
          isAdd: false,
          ...file
        };

        panes.push(selectedFile);
        this.activateFile = panes;
        this.activateKey = this.activateFile.length - 1;
      }
      const currentFile = this.activateFile[this.activateKey];
      const ofile = this.getOFileByModulePaht(currentFile.modulePath);

      if (ofile.editUserName) {
        if (ofile.editUserName.length === 0) {
          currentFile.isReadOnly = false;
          ofile.isReadOnly = false;
        } else {
          currentFile.isReadOnly = this.userinfo.name != ofile.editUserName;
          ofile.isReadOnly = this.userinfo.name != ofile.editUserName;
        }
      }

      if (!currentFile.isAdd) {
        this.$cloud.getFunctionDetail(file.modulePath).then(res => {
          // console.log("edit:", res);

          currentFile.content = res.scriptContent;
          currentFile.IsEditState = res.IsEditState;
          currentFile.editUserName = res.IsEditState ? res.EditChannelName : "";

          ofile.IsEditState = res.IsEditState;
          ofile.editUserName = res.IsEditState ? res.EditChannelName : "";

          if (this.selectedChild.editor) {
            this.selectedChild.editor.setValue(currentFile.content);
          }
          currentFile.isLoading = false;
        });
      } else {
        currentFile.name += " *";
        currentFile.content = this.getDefaultCode(currentFile);
        currentFile.changeValue = currentFile.content;
        currentFile.isLoading = false;
        currentFile.isChanged = true;
      }
      this.selectedChild = file;
    },

    getDefaultCode(file) {
      if (file.isConfig) {
        return configTemplate;
      } else if (file.isUseState == true && file.tempValue == "基础模板") {
        return baseTemplate;
      } else if (file.isUseState == true) {
        return stateTemplate;
      } else if (file.isUseState == false) {
        return normalTemplate;
      } else {
        return descriptionTemplate;
      }
    },

    getSourceCode(data) {
      return this.getFunc(data);
    },

    addfunc(file) {
      return this.$cloud.addFunction(file.modulePath, {
        scriptContent: file.content,
        isUseState: file.isUseState
      });
    },

    updatefunc(file) {
      return this.$cloud.updateFunction(file.modulePath, file.content);
    },

    doconfirm(value, callback) {
      callback = callback || function() {};

      if (this.activateKey === 0) {
        // 固定的首个tab不是文件
        return;
      }

      const confirmFile = this.activateFile[this.activateKey];

      const ofile = this.getOFileByModulePaht(confirmFile.modulePath);
      if (ofile.isReadOnly) {
        this.$message.error("文档当前为锁定状态，请勿编辑。否则有可能导致冲突");
        return;
      }

      if (!confirmFile.isInitChanged && !confirmFile.isChanged) {
        callback();
        return;
      } else {
        confirmFile.isChanged = true;
      }

      confirmFile.content = confirmFile.changeValue
        ? confirmFile.changeValue
        : confirmFile.content;

      if (confirmFile.isAdd) {
        this.addfunc(confirmFile).then(res => {
          if (res) {
            confirmFile.isAdd = false;
            this.selectedChild.isAdd = false;
            // TODO: 是否已经修改过处理
            this.$message.success("提交成功");
            this.dochange(0);
            callback();
          }
        });
      } else {
        try {
          this.updatefunc(confirmFile)
            .then(res => {
              if (res) {
                confirmFile.isAdd = false;
                this.selectedChild.isAdd = false;
                // TODO: 是否已经修改过处理
                this.$message.success("更新成功");
                this.dochange(1);
                callback();
              }
            })
            .catch(error => {
              console.log("error", error);
            });
        } catch (error) {
          this.$message.error(error.message);
        }
      }
    },

    dochange(index) {
      debugger;
      const file = this.activateFile[this.activateKey];
      const changeValue = file.editor.getValue();
      const ofile = this.getOFileByModulePaht(file.modulePath);

      if (index == 0 || index == 1) {
        file.isInitChanged = false;
        file.IsEditState = false;
        file.editUserName = this.userinfo.name;
        ofile.isInitChanged = false;
        ofile.IsEditState = false;
        ofile.editUserName = this.userinfo.name;
      }

      if (ofile.editUserName) {
        if (ofile.editUserName.length === 0) {
          ofile.isReadOnly = false;
        } else {
          ofile.isReadOnly = this.userinfo.name != ofile.editUserName;
        }
      }

      let isChanged = file.content != changeValue;

      if (file.isChanged) {
        if (!isChanged && !file.IsEditState) {
          file.isChanged = isChanged;
          file.name = file.name.replace(" *", "");
          broadcast.unEditState.bind(this)(ofile, this.userinfo, "", 800);
        }
      } else if (isChanged && !ofile.isReadOnly) {
        file.isChanged = isChanged;
        file.name += file.name.indexOf(" *") == -1 ? " *" : "";

        // 廣播編輯狀態
        broadcast.doEditState.bind(this)(ofile, this.userinfo);
      }

      if (!ofile.isReadOnly) {
        broadcast.fileContent.bind(this)({
          modulePath: file.modulePath,
          changeValue: changeValue
        });
      }

      file.changeValue = changeValue;
    },

    getOFileByModulePaht(modulePath) {
      if (this.fileKeyValueDic[modulePath]) {
        return this.fileKeyValueDic[modulePath].element;
      }

      this.fileKeyValueDic[modulePath] = getFileByModulePath(
        modulePath,
        this.folders
      );
      if (this.fileKeyValueDic[modulePath]) {
        return this.fileKeyValueDic[modulePath].element;
      } else {
        return false;
      }
    }
  }
};
</script>

<style lang="less">
.editor-wrap,
.monaco-editor .overflow-guard,
.monaco-editor,
.monaco-editor .inputarea.ime-input {
  width: 100% !important;
  flex: 1;
}

.add-wrap .add-wrap__haschose .folder-tree .ant-menu-item {
  font-size: 12px;
  background: white !important;
}

.add-wrap .tap-wrap .ant-tabs-bar {
  margin: 0;
  border: none;
  background: #585858;
}
.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-nav-container {
  height: 32px;
}
.ant-tabs.ant-tabs-card .ant-tabs-extra-content {
  line-height: 30px;
}
.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
  line-height: 32px;
  height: 32px;
  margin-right: 0;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.8);
  border: none;
  background: #585858;
  position: relative;
}
.add-wrap .tap-wrap .ant-tabs-bar .ant-tabs-tab.ant-tabs-tab-active,
.add-wrap
  .tap-wrap
  .ant-tabs-bar
  .ant-tabs-tab.ant-tabs-tab-active
  .ant-tabs-close-x {
  background-color: #1e1e1e;
  color: #fff;
}

.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab .ant-tabs-close-x {
  color: rgba(255, 255, 255, 0.8);
  position: absolute;
  width: auto;
  height: auto;
  top: 50%;
  transform: translateY(-50%);
  right: 8px;
  margin: 0;
  display: none;
}

.ant-tabs.ant-tabs-card
  .ant-tabs-card-bar
  .ant-tabs-tab:hover
  .ant-tabs-close-x {
  display: inline-block;
}

.ant-spin-container {
  height: 100%;
  position: relative;
  .btn-save {
    .ant-btn {
      position: absolute;
      right: 50px;
      bottom: 20px;
      border-radius: 50%;
      padding: 0;
      font-size: 14px;
      width: 34px;
      height: 34px;
      text-align: center;
      color: white;
      border-color: white;
      background: none;
    }
    .ant-btn:hover {
      color: #569cd6;
      border-color: #569cd6;
    }
  }
}

.color-edit {
  color: blue;
}
.color-add {
  color: red;
}

.editor-wrap {
  height: 100%;
}
.add-wrap {
  height: 100%;
  display: flex;
  height: 100%;
  .folder-tree {
    .ant-menu-submenu-title {
      // background: #eee;
      margin: 0;
      .actions {
        display: none;
        float: right;
        .ant-btn {
          padding: 0;
          border: none;
        }
      }
      &:hover {
        .actions {
          display: block;
        }
      }
    }
    .ant-menu-item {
      margin: 0;
    }
  }
  .tap-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    .ant-tabs-bar {
      margin: 0;
      .ant-tabs-tab {
        padding: 0 32px 0 15px;
        text-align: center;
        &.ant-tabs-tab-active {
          font-weight: normal;
        }
      }
    }
    .ant-tabs-content {
      flex: 1;
      .ant-tabs-tabpane {
        &.ant-tabs-tabpane-active {
          height: 100%;
        }
        .add-wrap__edit {
          height: 100%;
          .editor-wrap {
            flex: 1;
            overflow: hidden;
          }
          .actions {
            margin-top: 10px;
            .ant-btn {
              margin-right: 10px;
            }
          }
        }
      }
    }
  }
}
</style>
